<template>
  <!-- 放置弹层组件 -->
  <el-dialog :title="showTitle" :visible="showDialog" @close="cancelBtn">
    <!-- 放置表单数据 -->
    <!-- label-width 控制所有标题宽度 -->
    <el-form ref="deptForm" :model="formData" :rules="rules" label-width="120px">

      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>

      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>

      <el-form-item label="部门负责人" prop="manager">
        <!-- 如果elementui没有focus事件，可以加上.native修饰符  -->
        <el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getDeptManager">
          <el-option v-for="obj in DeptManager " :key="obj.id" :label="obj.username" :value="obj.username" />
        </el-select>
      </el-form-item>

      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- 确定/取消 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelBtn">取 消</el-button>
      <el-button type="primary" @click="okBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getDepartments, getDeptManager, addDepartments, getDeptDetail, updateDeptDetail } from '@/api/departments'
export default {
  name: 'AddDept',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }, treeNode: {
      type: Object, default: null
    }
  },
  data() {
    /** 检查部门名称重复 */
    const checkDeptNameRepeat = async(rule, value, callback) => {
      // value就是部门名称，要和同级部门去比较，有相同的名称则不能通过校验
      const res = await getDepartments()
      // 判断编辑还是新增来确定不同的校验函数
      var isRepeat = false
      if (this.formData.id) {
        // 编辑模式
        // 当前名字不能和同级名称重复
        // 先找出同级部门，再把自己排除
        res.depts.filter((item) => {
          return item.pid === this.treeNode.pid && item.id !== this.treeNode.id
        })
      } else {
        // 新增模式
        // 把获取到的数据筛选出同级部门去比较
        // 从depts中筛选出所有同级的数据为一个数组，然后在数组每一项中寻找是否有重名的部门
        isRepeat = res.depts.filter((item) => {
        // 当点击最上方的添加部门时，此时id为undefined，且 undefined != ''  (解决方案，在传入的对象中加入id='')
          return item.pid === this.treeNode.id
        }).some((item) => {
          return item.name === value
        })
        // 如果isRepeat有值，则表示名称重复
        isRepeat ? callback(new Error(`同级部门名称重复（${value}）`)) : callback()
      }
    }
    /** 检查部门编码重复 */
    const checkDeptCodeRepeat = async(rule, value, callback) => {
      const res = await getDepartments()
      // 编码不能和其他所有部门重复，由于历史数据有可能code为空，所以value值应该要求不为空 && value
      var isRepeat = false
      if (this.formData.id) {
        // 编辑模式
        // some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
        isRepeat = res.depts.filter((item) => {
          return item.id !== this.treeNode.id
        }).some((item) => {
          return item.code === value && value
        })
      } else {
        // 新增模式
        isRepeat = res.depts.some((item) => {
          return item.code === value && value
        })
      }
      isRepeat ? callback(new Error(`部门编码重复（${value}）`)) : callback()
    }
    return {
      // 定义一个表单数据
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人名字
        introduce: ''// 部门介绍
      }, rules: {
        name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }, { min: 1, max: 50, message: '部门名称长度为1-50个字符' }, { trigger: 'blur', validator: checkDeptNameRepeat }],
        code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' }, { min: 1, max: 50, message: '部门编码长度为1-50个字符' }, { trigger: 'blur', validator: checkDeptCodeRepeat }],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }, { min: 1, max: 50, message: '部门负责人长度为1-50个字符' }],
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' }, { min: 1, max: 300, message: '部门介绍长度为1-300个字符' }]
      }, // 校验规则
      DeptManager: {}// 最新负责人列表
    }
  },
  computed: {
    showTitle() {
      // 新增部门时formData中没有数据
      return this.formData.id ? '编辑部门' : '新增子部门'
    }
  },
  methods: {
    /** 当select触发focus时执行该函数获取最新员工列表 */
    async getDeptManager() {
      const res = await getDeptManager()
      this.DeptManager = res
    },
    /** 获取用户详情信息 */
    async getDeptDetail(id) {
      // prop传值时异步的，可能会接收不到this.treeNode.id，所以通过父组件传值
      this.formData = await getDeptDetail(id)
    },
    okBtn() {
      this.$refs.deptForm.validate(async(isOk) => {
        if (isOk) {
          // 表单校验通过，可以进行提交
          if (this.formData.id) {
            // 编辑部门提交
            await updateDeptDetail({
              ...this.formData
            })
          } else {
            // 新增部门提交
            await addDepartments({
              ...this.formData,
              pid: this.treeNode.id // 因为是新增的部门，pid应该等于当前点击部门的id
            })
          }
        }
        // 告诉父组件
        this.$emit('addDepts')
        // 修改showDialog
        this.$emit('update:showDialog', false)
        // 关闭dialog的时候会触发el-dialog的close事件，所以这里不需要再重置数据
      })
    }, cancelBtn() {
      // 修改showDialog
      this.$emit('update:showDialog', false)
      this.formData = {
        name: '',
        code: '',
        manager: '',
        id: ''
      }
      // 清除校验(下次打开弹层不会显示上次的校验信息),不是formData中的数据则无法清除
      this.$refs.deptForm.resetFields()
    }
  }
}
</script>
<style scoped></style>
